<template>
	<view class="content goodsDetail-content">
		<TopVue />
		<view class="goodsDetail-main">
			<view class="goods-left">
				<view class="goods-img-box goods-img-active">
					<image class="goods-img" src="/static/qrcode.png" mode="aspectFill"></image>
				</view>
				<view class="goods-img-box">
					<image class="goods-img" src="/static/qrcode.png" mode="aspectFill"></image>
				</view>
				<view class="goods-img-box">
					<image class="goods-img" src="/static/qrcode.png" mode="aspectFill"></image>
				</view>
				<view class="goods-img-box">
					<image class="goods-img" src="/static/qrcode.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="goods-right">
				<view class="goods-content">
					<view class="content-left">
						<image class="goods-bigimg" src="/static/qrcode.png" mode="aspectFit"></image>
					</view>
					<view class="content-right">
						<view class="goods-title">产品名称产品名称产品名称产品名称</view>
						<view class="goods-price-parent">
							<view class="goods-price">¥ 20.00</view>
							<view class="goods-buy">
								<text class="iconfont">&#xe711;</text>
								<input class="buy-number" value="0"/>
								<text class="iconfont">&#xe607;</text>
							</view>
						</view>
						<view class="goods-content-tips">温馨提示</view>
						<view class="goods-content-info">
							请仔细阅读产品说明书或者在医务人员的指导下购买和使用，禁忌内容或者注意事项详见说明书;
							保健食品不是药物，不能代替药物治疗疾病
						</view>
					</view>
				</view>
				<view class="goods-info">
					<view class="goods-info-list" v-for="item in goodsInfo">
						<text class="info-title">{{item.title}}：</text>
						<text class="info-words">{{item.info}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box">
			<view class="iconfont">&#xe646;</view>
			<view class="play-info">
				<view class="play-tips">应付:</view>
				<view>
					<text class="play-num">¥ 20.00</text>
					<text class="play-count">（1件）</text>
				</view>

			</view>
			<view class="bottom-btn">立即支付</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import TopVue from '@/components/top.vue'
	const goodsInfo=ref([
		{title:'产品名称',info:'汉和同康·德格臻品五味甘露泡浴球'},
		{title:'净含量',info:'30gx12粒'},
		{title:'主要成分',info:'桂枝、刺柏、大籽蒿、水柏枝、烈香杜鹃、B-石竹烯、柠檬酸、小苏打等【使用方法】取产品1-2颗,撕掉内膜,放入盆中,用适量开水溶解,再加温水调至合适温度(42~45°C为宜)，建议泡20~30分钟为宜'},
		{title:'委托方',info:'成都中医大中医药健康产业技术研究院有限公司【被委托方/生产企业】南阳思衡艾草生物科技有限公司【生产企业地址】河南省南阳市唐河县桐寨铺镇车站向北150米路西1号【注意事项】1.本品不能代替药物,2.仅用于洗浴或泡脚,勿口服;皮肤溃烂过敏者、饮酒过量者、儿童慎用,孕妇忌用;3.因个人肤质不同,使用后如出现皮肤不适,请立即停止使用;请置于儿童接触不到的地方，以免误食'},
		{title:'保存方法',info:'浴球易受潮,请密封干燥保存,避免强光直射,建议开封后立即使用'},
		{title:'生产批号',info:'见包装标注'},
		{title:'保存期限',info:'二年'},
		{title:'执行标准',info:'Q/SHAC001-2024'},
	])
</script>

<style lang="scss">
	.goodsDetail-content {
		.goodsDetail-main {
			min-height: calc(100vh - 70rpx);
			background-color: #F6F6F6;
			display: flex;
			padding: 20rpx;
			padding-bottom: 120rpx;

		}

		.goods-left {
			display: inline-block;
			vertical-align: top;

		}
		.goods-img-box{
			background-color: #fff;
			padding: 5rpx;
			border-radius: 4rpx;
			margin-bottom: 10rpx;
			border: 1rpx solid transparent;
			width: 88rpx;
			height: 88rpx;
		}
		.goods-img-active{
			border: 1rpx solid #2F65F3;
		}
		.goods-img {
			width: 100%;
			height: 100%;
			display: block;
		}

		.goods-right {
			display: inline-block;
			padding: 0 15rpx;
			height: 100%;
			flex-grow: 1;
			width: 200rpx;
		}
		.goods-content{
			display: flex;
		}
		.content-left{
			background-color: #fff;
			border-radius: 4rpx;
			padding: 10rpx;
			width: 263rpx;
			height: 263rpx;
			flex-shrink: 0;
		}
		.goods-bigimg{
			display: block;
			width: 100%;
			height: 100%;
		}
		
		.content-right{
			padding-left: 10rpx;
			width: 100rpx;
			flex-grow: 1;
		}
		.goods-price-parent{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			
		}
		.goods-title{
			font-weight: 500;
			font-size: 28rpx;
			color: #1E1E1E;
		}
		.goods-price{
			font-weight: 500;
			font-size: 28rpx;
			color: #FB1E16;
		}
		.goods-buy{
			display: flex;
			align-items: center;
			margin-top: 5rpx;
			justify-content: flex-end;
			.iconfont{
				font-size: 24rpx;
				font-weight: bold;
				color: #A1A1A1;
				padding: 5rpx;
			}
		}
		.buy-number{
			width: 50rpx;
			font-size: 28rpx;
			color: #1E1E1E;
			text-align: center;
			border: solid 1px rgba(16,53,151,0.2);
			margin: 0 15rpx;
		}
		
		.goods-content-tips{
			font-weight: 500;
			color: #1E1E1E;
			margin-top: 20rpx;
			font-size: 24rpx;
		}
		.goods-content-info{
			font-weight: 400;
			font-size: 20rpx;
			color: #4E4E4E;
			padding: 10rpx;
			line-height: 25rpx;
			
		}
		.goods-info{
			margin-top: 40rpx;
		}
		.goods-info-list{
			margin-bottom: 10rpx;
			display: flex;
			line-height: 24rpx;
		}
		.info-title{
			font-weight: 400;
			font-size: 20rpx;
			color: #1E1E1E;
			display: inline-block;
			width: 100rpx;
			flex-shrink: 0;
			text-align: right;
			vertical-align: top;
		}
		.info-words{
			font-weight: 400;
			font-size: 20rpx;
			color: #4E4E4E;
			
			display: inline-block;
		}

		.bottom-box{
			position: fixed;
			height: 105rpx;
			width: 100%;
			bottom: 0;
			left: 0;
			background-color: #fff;
			box-shadow: 0rpx -2rpx 3rpx 0rpx rgba(0,0,0,0.08);
			display: flex;
			align-items: center;
			padding:0 20rpx;
			.iconfont{
				padding-right: 20rpx;
				font-size: 50rpx;
				font-weight: bold;
				color: #2F65F3;
			}
		}
		.play-info{
			flex-grow: 1;
		}
		.play-tips{
			font-size: 24rpx;
			color: #4E4E4E;
		}
		.play-num{
			font-weight: 500;
			font-size: 32rpx;
			color: #FB1E16;
		}
		.play-count{
			font-size: 24rpx;
			color: #4E4E4E;
		}
		.bottom-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #2F65F3;
			
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			height: 70rpx;
			border-radius: 8rpx;
			width: 180rpx;
		}
	}
</style>